<template>
  <div style="display: inline-block; margin: 10px 5px;" @click="handleClick()">
    <el-card :body-style="{ padding: '0px' }" class="teacher-box" :class="boxHeight">
      <span slot="header" style="font-size:16px;"> </span>
      
      <div class="box-img">
        <img 
          :src="avatar"  
          style="width: 135px;height: 180px;border-radius:5px;"
        />
      </div>

      <div class="box-text"> 
        <p><strong>Name:</strong> {{name}} </p>
        <div v-show="position !== ''">
          <p><strong>Position:</strong> {{position}} </p>
        </div>
        <div v-show="degree !== ''">
          <p><strong>Degree:</strong>  {{degree}}</p>
        </div>
        <p><strong>Contact:</strong>  {{email}}</p>
        <div v-show="websiteText !== ''">
          <p><strong>Website:</strong>  <a :href="websiteLink">{{websiteText}}</a></p>
        </div>
        <div v-show="research !== ''">
          <p><strong>Research Interests:</strong></p>
          <p>{{research}}</p>
        </div>
      </div>

    </el-card>
  </div>
</template>

<script>
export default { 
  props: {
    uuid : {type:String,default:""},
    member_type : {type:String,default:""},
    name : {type:String},
    position : {type:String},
    degree : {type:String},
    email : {type:String},
    research : {type:String,default:""},
    imgUrl: {type:String,default:""},
    websiteText: {type:String,default:""},
    websiteLink: {type:String,default:""},
    heightStyle: {type:String,default:"heightStudnet"},
  },
  data() {
    return {
      avatar: "https://dummyimage.com/300x400/ff6a00/fff",
    };
  },
  created(){
    if (this.imgUrl !== "") 
    {
      this.avatar = this.imgUrl;
    }
    this.boxHeight = this.heightStyle;

  },
  methods: {
    handleClick() {
      let path_txt = '/memberdetail?uuid='+this.uuid+'&mt='+this.member_type;
      this.$router.push({path:path_txt})
    },
  }

};
</script>

<style lang="less" scoped>
@img-width: 400px;
@img-height: 280px;

.heightStudnet{height: 220px}
.heightTeacher{height: 280px}

.el-card{
  width: @img-width;
  // height: @img-height;
  border-radius:20px;
  /deep/.el-card__header {text-align: center; padding: 8px 20px; border-bottom:none;font-weight: bold;}

}

.box-img{ float:left; margin: 0px 10px; }
.box-text{ font-size:14px; text-align: left;line-height: 24px;margin: 0px 10px;}

</style>
